<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="__PUBLIC__/lib/html5shiv.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="__PUBLIC__/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>折线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计管理 <span class="c-gray en">&gt;</span> 折线图 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:void(0)" onclick="location.reload()" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="f-14 c-error">特别声明：康贝儿童医院挂号统计折线表</div>
	<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__PUBLIC__/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="__PUBLIC__/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="__PUBLIC__/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__PUBLIC__/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
    Highcharts.chart('container', {
        title: {
            text: '<?php echo $currentYear; ?>挂号量报表',
            x: -20 //center
        },
        subtitle: {
            text: '来源:康贝儿童医院',
            x: -20
        },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'] //
        },
        yAxis: {
            title: {
                text: '挂号量'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '位'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '来院',
            data: [<?php foreach($yearFirstData as $k=>$v) {if($k != 'all') {echo $v; if($k < 12) {echo ",";}}}?>]
        }, {
            name: '未到',
            data: [<?php foreach($yearZeroData as $k=>$v) {if($k != 'all') {echo $v; if($k < 12) {echo ",";}}}?>]
        }, {
            name: '总额',
            data: [<?php foreach($yearAllData as $k=>$v) {if($k != 'all') {echo $v; if($k < 12) {echo ",";}}}?>]
        }]
    });
});
</script>
<div class="page-container">
	<div class="text-c">
	<span class="select-box inline">
		<select name="category" class="select"  id="select">
                    <foreach name="yearArr" item="vo">
                        <if condition='$vo eq $currentYear'>
                            <option value="{$vo}" selected='selected'>{$vo}</option>
                        <else/>
                            <option value="{$vo}" >{$vo}</option>
                        </if>
                    </foreach>
		</select>
             
        </span>
        <span class="select-box inline">
		<select name="category" class="select"  id="selectOfMonth">
                    <option value="0" >月份</option>
                    <foreach name="yearAllData" item="vo">
                        <if condition="$vo gt 0 and $key neq 'all'">
                            <option value="{$key}" >{$key}月</option>
                        </if>
                    </foreach>
		</select>
             
        </span>
        <span class="select-box inline">
		<select name="category" class="select"  id="selectOfDay">
                    <option value="0" >日期</option>
                    
		</select>
             
        </span>
		<button name="" id="" class="btn btn-success" type="submit" onclick="seach()"><i class="Hui-iconfont">&#xe665;</i> 查找</button>
                <button name="" id="" class="btn btn-success" type="submit" onclick="explort123()">导出</button>
	</div>
	<div class="mt-20">
		<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
			<thead>
				<tr class="text-c">
                                        <th width="50">项目</th>
                                        <?php
                                            foreach($yearAllData as $k=>$v){
                                                if($v > 0 ) {
                                                ?><th width="50"><a class="btn btn-primary radius ChartForMonth" href="javascript:;" data-testcount="<?php echo $currentYear.'-'.$k; ?>">{$k}月份</th><?php
                                                }else{
                                                    ?><th width="50"><a class="btn btn-primary radius" href="javascript:;"style="background-color: #999999">{$k}月份</th><?php
                                                }
                                                if($k == 12) {
                                                    break;
                                                }
                                            }
                                        ?>
                                        <th width="50">合计</th>
			</thead>
			<tbody>
                                <tr class="text-c">
					<td>来院</td>
                                        <foreach name="yearFirstData" item="vo">
                                            <td>{$vo}</td>
                                        </foreach>
				</tr>
                                <tr class="text-c">
					<td>未到</td>
                                        <foreach name="yearZeroData" item="vo">
                                            <td>{$vo}</td>
                                        </foreach>
				</tr>
                                <tr class="text-c">
					<td>总额</td>
                                        <foreach name="yearAllData" item="vo">
                                            <td>{$vo}</td>
                                        </foreach>
				</tr>
                                <tr class="text-c">
					<td>来院比率</td>
                                        <foreach name="yearPercentageData" item="vo">
                                            <td>{$vo}%</td>
                                        </foreach>
				</tr>
			</tbody>
		</table>
	</div>
</div>
    <span id='dowload'></span>
<script>
    //查找                                                        
    function seach() {
        var monthNum = $("#selectOfMonth").val();
        var dayNum   = $("#selectOfDay").val();
        if(dayNum > 0){ 
            locationDay();
        }else{
        if( monthNum > 0) {
            locationMonth();
        }else{
            locationYear();
        }
        }
        

    }
    //年份跳转
    function locationYear() {
        var selectYear = $("#select").val();
        window.location.href = window.location.href+"/year/"+selectYear;
    }
    //月份跳转
    function locationMonth(){
        var selectYear = $("#select").val();
        var date = selectYear+'-'+ $("#selectOfMonth").val();
        var hostUrl = 'http://'+window.location.hostname+"/index.php/Home/statistical/LineChartOfMonth/date/"+date;
        window.location.href = hostUrl;
    }
    //日期跳转
    function locationDay() {
        var selectYear = $("#select").val();
        var date = selectYear+'-'+ $("#selectOfMonth").val()+'-'+$("#selectOfDay").val();
        var hostUrl = 'http://'+window.location.hostname+"/index.php/Home/statistical/LineChartOfDay/date/"+date;
        window.location.href = hostUrl;
    }
    //月份查看
    $(".ChartForMonth").click(function(){
        var date = $(this).attr("data-testcount"); 
        var hostUrl = 'http://'+window.location.hostname+"/index.php/Home/statistical/LineChartOfMonth/date/"+date;
        creatIframe(hostUrl,date+'挂号量报表')
    });
    //月份联动
    $("#select").change(function(){
        var year = $("#select").val();
        $.ajax({
            type: 'POST',
            url: 'http://'+window.location.hostname+"/index.php/Home/statistical/returnNumOfMonth/",
            data:{year:year},
            dataType: 'json',
            success: function(result){
               if(result.status==1) {
                   $("#selectOfMonth").empty();
                   $("#selectOfMonth").append(
                        "<option value='0'>月份</option>"
                    );
                    for(var i in result) {
                        if(i != 'status') {
                            $("#selectOfMonth").append(
                                "<option value='"+i+"'>"+i+"月</option>"
                            );
                        }
                    }
               }else{
                    alert('请求失败！');
                }
            },
        });	
    });
    //日期联动
    $("#selectOfMonth").change(function(){
        var year = $("#select").val();
        var month = $("#selectOfMonth").val();
        $.ajax({
            type: 'POST',
            url: 'http://'+window.location.hostname+"/index.php/Home/statistical/ajaxNumOfDay/",
            data:{month:month,year:year},
            dataType: 'json',
            success: function(result){
               if(result.status==1) {
                   $("#selectOfDay").empty();
                   $("#selectOfDay").append(
                        "<option value='0'>日期</option>"
                    );
                    for(var i in result) {
                        if(i != 'status') {
                            $("#selectOfDay").append(
                                "<option value='"+i+"'>"+i+"日</option>"
                            );
                        }
                    }
               }else{
                    alert('请求失败！');
                }
            },
        });	
    });
    //导出
    function explort123() {
        var str = '';
        str += "/year/"+$("#select").val();
        if($('#selectOfMonth').val() > 0) {
            str += "/month/"+$('#selectOfMonth').val();
        }
        if($('#selectOfMonth').val()> 0 && $('#selectOfDay').val() > 0) {
            str +=  "/day/"+$('#selectOfDay').val();
        }
        creatIframe('http://'+window.location.hostname+"/index.php/Home/statistical/ajaxExport/"+str,'下载');
        /*$.ajax({
            type:"POST",
            data:data,
            url:'http://'+window.location.hostname+"/index.php/Home/statistical/ajaxExport/",
            success:function(result){
                $("#dowload").html(result);
            }
        });*/
    }
</script>
    
</body>
</html>